<html>
<head>
    <title>颜色名称参照</title>
    
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">

    <link href="https://cdn.bootcss.com/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>

    <link href="https://cdn.bootcss.com/bootstrap-slider/9.9.0/css/bootstrap-slider.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-slider/9.9.0/bootstrap-slider.min.js"></script>
</head>
<body>
    <script src="js/colors.js"></script>

    <div class="container">
        <div class="row" align="center">
            <h1>颜色名称参照</h1>
            <hr/>
        </div>
        <div class="row">
            <div class="col-md-2">
                <div id="color-picker" class="input-group colorpicker-component">
                    <input id="picked-color" type="text" value="#000000" class="form-control" />
                    <span class="input-group-addon"><i></i></span>
                </div>
            </div>
            <!-- 
            <div class="col-md-2" align="right">
                <span >相似率阈值(0-1)</span>
            </div>
            -->
            <div class="col-md-3">
                <!-- <input id="similar-rate-threshold" type="text" value="0.9" class="form-control" /> -->
                <input id="similar-rate-threshold" data-slider-id='similar-rate-threshold-slider' type="text" data-slider-min="0" data-slider-max="765" data-slider-step="1" data-slider-value="688"/>
            </div>
            <div class="col-md-3">
                <button id="btn-get-similar-color" class="btn btn-default" type="submit">获取相似颜色</button>
            </div>
        </div>
        <div class="row">
            <hr/>
        </div>
        <div id="similar-color-label" class="row" style="display: none">
            <div class="col-md-12"><h4>相似颜色：</h4></div>
        </div>
        <div id="similar-color-table" style="display: none"></div>
        <div id="similar-color-hr" class="row" style="display: none">
            <hr/>
        </div>

        <div id="color-table-label" class="row">
            <div class="col-md-12"><h4>颜色名称表：</h4></div>
        </div>
        <div id="color-table"></div>
    </div>
    <script>
        $('#color-picker').colorpicker();
        $('#similar-rate-threshold').slider({
            tooltip: 'always',
            formatter: function(value) {
                var percent = 100 * value / (255*3);
                return '相似率阈值: ' + ( percent.toFixed(2) + '%' );
            }
        });

        function Color(name, rgb) {
            this.name = name;
            this.rgb = rgb;
            this.red = parseInt(rgb.substr(1,2),16);
            this.green = parseInt(rgb.substr(3,2),16);
            this.blue = parseInt(rgb.substr(5,2),16);
            this.delta = 0;

            this.compare = function(color) {
                var delta_r = Math.abs(color.red - this.red);
                var delta_g = Math.abs(color.green - this.green);
                var delta_b = Math.abs(color.blue - this.blue);
                return 255*3 - (delta_r + delta_g + delta_b);
            }
        }

        function ColorSimilarValue(name, rgb, csv) {
            this.name = name;
            this.rgb = rgb;
            this.similarValue = csv;
        }

        function csv_sort(a, b) {
            return b.similarValue - a.similarValue;
        }

        var colorList = new Array();

        var html = "";
        for (var index in colors) {
            var color = colors[index];
            if (index % 4 == 0) {
                html = "<div class='row'>";
            }
            html += '<div class="col-md-3" style="background-color:' + color.rgb + '">' + color.name + "(" + color.rgb + ")" + '</div>';
            colorList[index] = new Color(color.name, color.rgb);
            if (index % 4 == 3) {
                html += "</div>";
                $('div#color-table').append(html);
            }
        }

        $('button#btn-get-similar-color').click(function(){
            console.log("隐藏颜色名称表");
            $("#color-table-label").hide();
            $("#color-table").hide();

            var picked_color = new Color("选定颜色", $("#picked-color").val());
            var similarThreshold = $("#similar-rate-threshold").val();

            var colorSimilarValueList = new Array();
            $('div#similar-color-table').empty();
            for (var index in colorList) {
                var color = colorList[index];
                var similarValue = color.compare(picked_color);
                if (similarValue > similarThreshold) {
                    colorSimilarValueList[index] = new ColorSimilarValue(color.name, color.rgb, similarValue);
                }
            }

            colorSimilarValueList.sort(csv_sort);
            progressStyles = new Array();
            progressStyles[0] = 'progress-bar-success';
            progressStyles[1] = 'progress-bar-info';
            progressStyles[2] = 'progress-bar-warning';
            progressStyles[3] = 'progress-bar-danger';

            for (var index in colorSimilarValueList) {
                var csv = colorSimilarValueList[index];

                html = "<div class='row'>";
                html += '<div class="col-md-1">\
                        <div style="height:12px; background-color:' + picked_color.rgb + '"></div>\
                        <div style="height:12px; background-color:' + csv.rgb + '"></div>\
                    </div>';
                html += '<div class="col-md-3">' + csv.name + "(" + csv.rgb + ')</div>';

                var percent = 100 * csv.similarValue / (255*3);
                var progressbar = '<div class="progress">\
                        <div class="progress-bar progress-bar-striped ' + progressStyles[index%4] + '" \
                            role="progressbar" \
                            aria-valuenow="' + similarValue + '" \
                            aria-valuemin="0" \
                            aria-valuemax="765" \
                            style="width: '+percent.toFixed(2)+'%;"> \
                            ' + percent.toFixed(2) + '% \
                        </div> \
                    </div>';

                html += '<div class="col-md-6">' + progressbar + '</div>';
                html += "</div>";
                $('div#similar-color-table').append(html);
            }

            var similar_color_amount = $('div#similar-color-table').children().length;
            if (similar_color_amount <= 0) {
                $('div#similar-color-table').append("没有找到相似颜色");
            }

            console.log("显示相似颜色");
            $("#similar-color-label").show();
            $("#similar-color-table").show();
            $("#similar-color-hr").show();
        });
    </script>
</body>
</html>
